<template>
  <el-row class="scencis-desc" type="flex" justify="space-between">
    <el-col :span="12">
      <el-row class="title-region">
        <el-col :span="4">
          <span>区域：</span>
        </el-col>
        <el-col :span="20" class="scencis">
          <div class="scencis-box" :style="[ isShow ? boxHeight:'']">
            <span v-for="(val,i) in scenics" :key="i" class="scencis-span">{{val.name}}</span>
          </div>
          <a href="#" @click="isShow = !isShow">
            <i class="el-icon-d-arrow-right" :style="[ isShow ? iconRotate:'']"></i>
            等{{scenics.length}}个区域
          </a>
        </el-col>
      </el-row>
      <el-row class="title-region">
        <el-col :span="4">
          <span>
            均价
            <el-tooltip
              class="item"
              effect="dark"
              content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              placement="top-start"
              >
              <i class="el-icon-info"></i>
            </el-tooltip>:
          </span>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="7">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom-start"
                >
                <div>
                  <i class="iconfont icon-V3" v-for="icon in 3" :key="icon"></i>
                  <span>￥332</span>
                </div>
              </el-tooltip>
            </el-col>
            <el-col :span="8">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom-start"
                >
                <div>
                  <i class="iconfont icon-V3" v-for="icon in 4" :key="icon"></i>
                  <span>￥521</span>
                </div>
              </el-tooltip>
            </el-col>
            <el-col :span="9">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom-start"
                >
                <div>
                  <i class="iconfont icon-V3" v-for="icon in 5" :key="icon"></i>
                  <span>￥768</span>
                </div>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="11">
      <div id="amap" v-loading="loading"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    scenics: {
      type: Array,
      default: () => {
        return [];
      }
    },
    position: {
      type: Array,
      default: () => {
        return [116.205467, 39.907761];
      }
    }
  },
  data() {
    return {
      isShow: false,
      boxHeight: {
        maxHeight: "max-content"
      },
      iconRotate: {
        transform: "rotate(-90deg)"
      },
      map: null,
      city: "",
      loading: false
    };
  },
  watch: {
    position() {
      // console.log(this.position);
      this.setMarkers();
    }
  },
  methods: {
      loadmap(){
          this.$axios({
              url:"https://restapi.amap.com/v3/ip",
              params:{
                  key:'0d86ff0ef5fe88f448a47cbc7b7e9809',
              }
          }).then(res=>{
              const {city} = res.data
              this.city = city
              
              this.$alert('城市名：', '定位城市', {
                  confirmButtonText: '确定',
                  message:this.city
              }).then(()=>{
                  this.$axios.get('cities',{params:{name:city}}).then(res=>{
                      const {data} = res.data
                      this.$emit('on-city',...data)
                  })
              })
          })
      },
      setMarkers(){
          this.loading=true
          let location = [...this.position]
          const markers = location.map((el,index)=>{
              const marker = new AMap.Marker({
                  content:`<span style=" display: inline-block;text-align: center;background-color: blue;
                          width: 20px;border-radius: 20px 20px 0px 20px;
                          transform: rotate(45deg);"><i style="display: inline-block;
                          transform: rotate(-45deg);
                          color: #fff;">${index+1}</i></span>`,
                  title: el.name,
                  position: el.location,
                  extData: el.id
              })
              marker.on('mouseover', ()=>{
                  return this.showPoi(el)
              })
              return marker
          })
          this.map.clearMap()
          this.map.add(markers)
          this.map.setFitView()
          this.loading=false
      },
      showPoi(item) {
          const markers = this.map.getAllOverlays('marker');
          markers.forEach(marker => {
              if (marker.getExtData() == item.id) {
                marker.setTop(true);
                const infoWindow = new AMap.InfoWindow({
                    content: `<span>${marker.getTitle()}</span>`,
                    offset: new AMap.Pixel(0, -32),
                });
                infoWindow.open(this.map, marker.getPosition());
                this.map.setCenter(marker.getPosition())
              }
          })
      }
  },
  mounted() {
      this.map = new AMap.Map('amap')
      if(!this.$route.query.city){
          this.loadmap()
      }
  }
}
</script>

<style lang="less" scoped>
#amap {
  width: 420px;
  height: 260px;
}
.amap-icon img {
  width: 25px;
  height: 34px;
}
.amap-marker-label {
  border: 0;
  background-color: transparent;
}
.info {
  position: relative;
  top: 0;
  right: 0;
  min-width: 0;
}
.scencis-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  .title-region {
    margin-bottom: 20px;
  }
  .scencis {
    .scencis-box {
      max-height: 3em;
      overflow: hidden;
      span {
        margin-right: 1em;
        &:hover {
          text-decoration: underline;
          color: deepskyblue;
          cursor: pointer;
        }
      }
    }
    a {
      &:hover {
        color: inherit;
      }
      .el-icon-d-arrow-right {
        color: #ffc107;
        transform: rotate(90deg);
      }
    }
  }
  .icon-V3:before {
    color: #ffc107;
  }
}
</style>